<template>
  <div class="upload-container">
    <div class="card">
      <h1>📁 图片批量上传</h1>
      <form @submit.prevent="uploadImages">
        <div class="form-group">
          <label for="imageFolder">选择文件夹：</label>
          <input
            type="file"
            id="imageFolder"
            @change="onFilesSelected"
            webkitdirectory
            directory
            multiple
            accept="image/*"
          />
        </div>
        <button type="submit">📤 上传图片</button>
      </form>
    </div>
  </div>
</template>

<script>
import axios from 'axios';

export default {
  data() {
    return {
      selectedFiles: [],
      position: 'lable',
      folderName: '',
      url: '/medical/lable/upload'
    };
  },
  methods: {
    onFilesSelected(event) {
      if (event.target.files.length === 0) {
        alert('请选择至少一个文件夹');
        return;
      }

      for (const file of event.target.files) {
        console.log(file.webkitRelativePath);
      }

      const firstPath = event.target.files[0].webkitRelativePath;
      const folderName = firstPath.split('/')[0];
      console.log('识别出的文件夹名称:', folderName);

      this.folderName = folderName;
      this.selectedFiles = Array.from(event.target.files);
    },
    async uploadImages() {
      if (!this.selectedFiles.length) {
        alert('请选择至少一个文件');
        return;
      }

      for (const file of this.selectedFiles) {
        const formData = new FormData();
        formData.append('file', file);
        formData.append('photoName', file.name);
        const newPosition = `${this.position}/${this.folderName}`;
        formData.append('position', newPosition);
        formData.append('tagType', 'eye');

        try {
          const response = await axios.post(`${this.URLhost}${this.url}`, formData, {
            headers: {
              'Content-Type': 'multipart/form-data'
            }
          });
          console.log(`文件 ${file.name} 上传成功!`, response.data);
        } catch (error) {
          console.error(`文件 ${file.name} 上传失败:`, error);
          alert(`文件 ${file.name} 上传失败，请重试。`);
        }
      }
      alert('所有图片上传完成！');
    }
  }
};
</script>

<style scoped>
.upload-container {
  display: flex;
  justify-content: center;
  align-items: center;
  min-height: 100vh;
  background: linear-gradient(to right, #eef2f3, #8e9eab);
  font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
}

.card {
  background: #ffffff;
  padding: 40px 50px;
  border-radius: 16px;
  box-shadow: 0 8px 20px rgba(0, 0, 0, 0.1);
  max-width: 500px;
  width: 100%;
}

h1 {
  font-size: 24px;
  margin-bottom: 30px;
  text-align: center;
  color: #333;
}

.form-group {
  margin-bottom: 20px;
}

label {
  display: block;
  font-weight: bold;
  margin-bottom: 10px;
  color: #555;
}

input[type="file"] {
  width: 100%;
  padding: 10px;
  border: 2px dashed #ccc;
  border-radius: 8px;
  background-color: #fafafa;
  transition: border-color 0.3s;
}

input[type="file"]:hover {
  border-color: #007bff;
}

button {
  width: 100%;
  padding: 12px 0;
  font-size: 16px;
  font-weight: bold;
  background-color: #007bff;
  color: white;
  border: none;
  border-radius: 8px;
  transition: background-color 0.3s, transform 0.2s;
}

button:hover {
  background-color: #0056b3;
  transform: scale(1.03);
}
</style>
